<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: () => false
  },
  list: {
    type: Array,
    default: () => [] as Array<object>
  },
  height: {
    type: [String, Number],
    default: () => '100%'
  },
  showHeader: {
    type: Boolean,
    default: () => true
  },
  showTree: {
    type: Boolean,
    default: () => false
  },
  highLight: {
    type: Boolean,
    default: () => false
  },
  rowKey: {
    type: String,
    default: () => 'id'
  },
  columns: {
    type: Array,
    default: () => [] as Array<object>
  },
  showSummary: {
    type: Boolean,
    default: () => false
  },
  stripe: {
    type: Boolean,
    default: () => true
  },
  currentRowKey: {
    type: [String, Number],
    default: () => null
  }
})

const emit = defineEmits([
  'changeSelection',
  'changeCurrent',
  'command',
  'clickCell'
])

const state = reactive({
  tableData: props.list,
  columns: props.columns as any,
  tableLayout: 'fixed',
  treeProps: {
    children: 'children',
    hasChildren: 'hasChildren'
  }
})

const handleSelectionChange = (e: any) => {
  emit('changeSelection', e)
}

const currentChange = (currentRow: any, oldCurrentRow: any) => {
  if (props.highLight) {
    emit('changeCurrent', currentRow, oldCurrentRow)
  }
}

const handleAction = (command: any, scope: any) => {
  emit('command', command, scope)
}

const clickCell = (row: any, column: any, cell: any, event: Event) => {
  emit('clickCell', row, column, cell, event)
}

watch(
  () => props.list,
  (val) => {
    state.tableData = val
  }
)
watch(
  () => props.columns,
  (val) => {
    state.columns = val
  }, {
    deep: true
  }
)
</script>

<template>
  <el-table
    class="w-full"
    :stripe="props.stripe"
    border
    v-loading="loading"
    :table-layout="state.tableLayout"
    :row-key="props.rowKey"
    :height="props.height"
    :data="state.tableData"
    :show-header="props.showHeader"
    :tree-props="showTree ? state.treeProps : {}"
    :highlight-current-row="props.highLight"
    :current-row-key="props.currentRowKey"
    @selection-change="handleSelectionChange"
    @current-change="currentChange"
    @cell-click="clickCell"
    :show-summary="props.showSummary"
  >
    <template v-for="(col, index) in state.columns">
      <el-table-column
        v-if="
          col.type === 'index' ||
          col.type === 'selection' ||
          col.type === 'expand'
        "
        :key="index"
        :sortable="col.sortable"
        :prop="col.prop"
        :align="col.align"
        :label="col.label"
        :type="col.type"
        :width="col.width"
      />
      <table-column :key="col.prop" :col="col" @command="handleAction" v-else>
        <template #default="{ slotName, row, index }">
          <slot :name="slotName" :row="row" :index="index"></slot>
        </template>
        <template #customHeader="{ slotName, column, index }">
          <slot :name="slotName" :column="column" :index="index"></slot>
        </template>
      </table-column>
    </template>
  </el-table>
</template>

<style lang="scss" scoped></style>
